<template>
    <div id="bottom-action" class="animated " :class="{bounceInUp:value,bounceOutDown:!value && enable}"
         v-if="enable">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: 'bottomAction',
        components: {},
        props: {
            value: {
                type: Boolean,
                default: false
            },
        },
        watch: {
            value(val) {
                if (val) {
                    this.enable = true;
                }
            }
        },
        data() {
            return {
                enable: false
            }
        },
        computed: {},
        methods: {},
        mounted() {
        },
    }
</script>

<style lang="less" scoped>
    #bottom-action {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 80px;
        background-color: #ecf8ff;
        padding: 20px 15px 5px 220px;

        z-index: 3000;
    }
</style>
